<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张睿的第一个React练习之虚拟DOM</title>
    <!-- 1.引入react核心库 注意引入地址-->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 2.引入react-dom用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <div id="root"></div>
    <div id="roots"></div>
    <script>
        console.log('React',React,ReactDOM)
        //创建元素React元素
        /***
         * 三个API
         * React.createElement(type代表元素的类型，属性，节点/子节点)
         * ReactDOM.createRoot 创建根节点
         * render（ele)//渲染元素到页面。页面展现我们的内容
        */
       //元素
        let box = React.createElement("h1",null,"你好")
        let boxs = React.createElement("p",null, 'hi')
        //渲染元素到页面中去
        //不同的版本我们使用的语法也不一样
        //17版本语法 因为我们的版本是18的所以我们使用17的语法会报错
        // ReactDOM.render(box,document.getElementById('root'))

        //18版本用法 18版本的使用18本版的就不会报错了

        let root =ReactDOM.createRoot(document.getElementById("root"))
        //渲染元素到页面中
        root.render(box)

        let roots=ReactDOM.createRoot(document.getElementById("roots"))
        roots.render(box)
        roots.render(boxs)

        
    </script>
</head>
<body>
    
</body>
</html>